<template>
  <div>
    <el-row>
      <el-col :span="24">
        <h2>中国福利彩票双色球第{{data._id}}期全国开奖公告</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">开奖日期</el-col>
      <el-col :span="12">{{data.date}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">奖池金额</el-col>
      <el-col :span="12">{{data.poolmoney}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><h3>开奖号码</h3></el-col>
      <el-col :span="12"><h3>开奖详情</h3></el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="3">开奖红号</el-col>
          <el-col :span="3" v-for="red in data.red" v-bind:key="red">
            {{red}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">开奖蓝号</el-col>
          <el-col :span="9">{{data.blue}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="data.prizegrades"
          style="width: 100%">
          <el-table-column
            prop="grade"
            label="奖等"
            width="180">
          </el-table-column>
          <el-table-column
            prop="number"
            label="中奖人数"
            width="180">
          </el-table-column>
          <el-table-column
            prop="bonus"
            label="奖金金额（元）">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>

</template>

<script>

import http from '../http'

export default {
  name: 'Latest',
  data() {
    return {
      data: {},
      props: {
        children: 'son',
        label: 'name'
      },
      frequncy: {}
    }
  },
    methods: {
      getLatest(){
        http.get(
          '/lottery/latest'
        ).then(response => (
        this.data = response.data.data
      ))
    },
      getFrequency(){
        http.get(
          '/frequency/latest'
        ).then(response => (
        this.frequncy = response.data.data
      ))
        
      }
  },
  created() {
    this.getLatest()
    this.getFrequency()
  }
  }
</script>

<style>
  .text_left {
    text-align: left;
  }
  .text_right {
    text-align: right;
  }
</style>
